<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ $t("sys.data_clear") }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <div class="pl30 pr30">
      <el-table
        ref="table"
        :data="tableData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="48"> </el-table-column>
        <el-table-column prop="title" :label="$t('sys.data_type')">
          <template slot-scope="scope">
            <span :title="scope.row.title">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="tr">
      <el-button @click="close">{{ $t("sys.cancel") }}</el-button>
      <el-button type="primary" @click="submit" :loading="loading">{{
        $t("sys.confirm")
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postHmwebsqlDataclean } from "@/apis/paas/HmWebSqlController.js";
import i18n from "../../../../i18n";

const DATA = [
  {
    type: "MODEL",
    title: i18n.t("sys.business_model") + i18n.t("sys.data"),
  },
  {
    type: "ORG_USER",
    title:
      i18n.t("sys.organizational_structure") +
      "、" +
      i18n.t("sys.approval_group") +
      "、" +
      i18n.t("sys.role") +
      "、" +
      i18n.t("sys.user_group") +
      i18n.t("sys.data"),
  },
  {
    type: "MSG",
    title: i18n.t("sys.message_record") + i18n.t("sys.data"),
  },
  {
    type: "LOGIN_LOG",
    title: i18n.t("sys.login_log"),
  },
  {
    type: "SERVICE_UPDATE_LOG",
    title: i18n.t("sys.business_operation_log"),
  },
];

export default {
  data() {
    return {
      loading: false,
      showVisible: false,
      tableData: DATA,
      multipleSelection: [],
    };
  },

  methods: {
    open() {
      this.tableData = DATA;
      this.multipleSelection = [];
      this.$refs.table && this.$refs.table.clearSelection();
      this.showVisible = true;
    },

    close() {
      this.showVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async submit() {
      const dataTypes = this.multipleSelection.map((item) => item.type);
      if (this.multipleSelection.length) {
        try {
          await this.$confirm(i18n.t("sys.confirm_data_clear"), {
            title: i18n.t("sys.tips"),
            type: "warning",
            center: true,
          });
          this.loading = true;
          postHmwebsqlDataclean(dataTypes)
            .then(() => {
              this.loading = false;
              this.showVisible = false;
              this.$message.success(i18n.t("sys.operation_success"));
            })
            .catch((e) => {
              this.loading = false;
            });
        } catch (error) {}
      } else {
        this.showVisible = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
